<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="jquery-ui-1.12.1\jquery-ui.js"></script>
    <link rel="stylesheet" href="jquery-ui-1.12.1\jquery-ui.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="animate3.6.css">
    <style>
    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }

    body,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    pre,
    code,
    form,
    fieldset,
    legend,
    input,
    button,
    textarea,
    p,
    blockquote,
    table,
    th,
    td {
        margin: 0;
        padding: 0;
    }

    p {
        color: #eee;
        text-align: center;
        margin: 60px 0 30px 0;
    }

    li {
        list-style: none;
    }

    body {
        font-family: "Open Sans", sans-serif;
        background: #34495e;
        font-size: 14px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    .container {
        background: #2c3e50;
        overflow: hidden;
        width: 360px;
        margin: 0 auto;
        color: #FFF;
        border-radius: 3px 3px 0 0;
        box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.2);
    }

    .container .title {
        background: #3498db;
    }

    .container h1 {
        font-size: 20px;
        font-weight: 600;
        padding: 10px 15px;
        text-transform: uppercase;
    }

    .add {
        float: right;
        border-radius: 3px;
        margin-right: 20px;
        margin-top: 5px;
        padding: 8px 10px;
        background: #2980b9;
    }

    .add:hover {
        background: rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }

    .row {
        color: #333;
        background: #FFF;
        width: 100%;
        height: 40px;
        padding-left: 10px;
        line-height: 2.8;
    }

    .row:hover a {
        width: 40px;
        opacity: 1;
    }

    .row:nth-child(2n) {
        background: #f7f7f7;
    }

    .row:hover {
        background: #eee;
    }

    .remove,
    .completed {
        float: right;
        text-align: center;
        height: 40px;
        width: 0;
        background: #2ecc71;
        color: #FFF;
        opacity: 0;
        text-decoration: none;
        display: inline-block;
        transition: all 0.2s ease;
    }

    .remove:hover,
    .completed:hover {
        background: #27ae60;
    }

    .remove {
        background: #e74c3c;
    }

    .remove:hover {
        background: #c0392b;
    }

    .done {
        text-decoration: line-through;
        color: #ccc;
    }

    .add-new {
        float: right;
        height: 40px;
        width: 40px;
        text-align: center;
        background: #2ecc71;
        color: #FFF;
        line-height: 2.8;
        transition: all 0.3s linear;
    }

    .add-new:hover {
        background: #27ae60;
    }

    .new-task {
        display: none;
    }

    .new-task input {
        -webkit-appearance: none;
        -moz-appearance: none;
        border-radius: 0;
        background: #ecf0f1;
        font-size: 14px;
        font-family: "Open Sans", sans-serif;
        width: 320px;
        padding: 5px 10px;
        height: 40px;
        border: none;
        outline: none;
    }

    .ui-sortable-helper {
        box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.2);
    }
    </style>
</head>

<body>
    <p>一个简单的todo，老外写的，我觉得最棒的还是在于能够拖拽，主要依赖JQ和JQUI</p>
    <div class='container'>
        <div class='add'>
            <i class='fa fa-plus'></i>
        </div>
        <div class='title'>
            <h1>待办事项</h1>
        </div>
        <div class='new-task'>
            <a class='add-new' href='#'><i class='fa fa-plus'></i></a>
            <input id='todo-text' placeholder='新任务'>
        </div>
        <ul>
            <li class='row'>
                <a class='remove' href='#'>
        <i class='fa fa-trash-o'></i>
      </a>
                <a class='completed' href='#'>
        <i class='fa fa-check'></i>
      </a> 去银行取钱
            </li>
            <li class='row'>
                <a class='remove' href='#'>
        <i class='fa fa-trash-o'></i>
      </a>
                <a class='completed' href='#'>
        <i class='fa fa-check'></i>
      </a> 买点吃的
            </li>
            <li class='row'>
                <a class='remove' href='#'>
        <i class='fa fa-trash-o'></i>
      </a>
                <a class='completed' href='#'>
        <i class='fa fa-check'></i>
      </a> 叠好被子
            </li>
            <li class='row'>
                <a class='remove' href='#'><i class='fa fa-trash-o'></i></a>
                <a class='completed' href='#'><i class='fa fa-check'></i></a> 做点狗粮
            </li>
            <li class='row'>
                <a class='remove' href='#'><i class='fa fa-trash-o'></i></a>
                <a class='completed' href='#'><i class='fa fa-check'></i></a> 给狗找个伴
            </li>
        </ul>
    </div>
    <script>
    $(document).on("click", ".remove", function() {
        $(this)
            .parent()
            .slideUp();
    });

    $(document).on("click", ".completed", function() {
        $(this)
            .parent()
            .toggleClass("done");
    });

    $("ul").sortable();

    $(".add").click(function() {
        $(".new-task").slideToggle();
        $("#todo-text").focus();
    });

    // Pressing enter
    $(document).keypress(function(e) {
        var str = $("#todo-text").val();

        if (e.which == 13 && str != "" && str != null) {
            $(
                    "<li class='row'><a class='remove' href='#'><i class='fa fa-trash-o'></i></a><a class='completed' href='#'><i class='fa fa-check'></i></a>" +
                    str +
                    "</li>"
                )
                .fadeIn()
                .appendTo("ul");
            $("#todo-text").val("");
            $("#todo-text").focus();
        }
    });

    // Press the + sign
    $(".add-new").click(function() {
        var str = $("#todo-text").val();

        if (str != "" && str != null) {
            $(
                    "<li class='row'><a class='remove' href='#'><i class='fa fa-trash-o'></i></a><a class='completed' href='#'><i class='fa fa-check'></i></a>" +
                    str +
                    "</li>"
                )
                .fadeIn()
                .appendTo("ul");
            $("#todo-text").val("");
            $("#todo-text").focus();
        }
    });
    </script>
</body>

</html>